<template>
  <n-grid :cols="10" item-responsive>
    <n-grid-item :span="7">
      <div class="essay-left">
        <ShowEssay
          v-if="essayData[0]"
          v-for="item in essayData"
          :key="item.essay_id"
          :essay_data="item"
        ></ShowEssay>
        <n-empty v-else description="还没有发布过文章哦" style="height: 265px;justify-content: center;">
        </n-empty>
      </div>
    </n-grid-item>
    <n-grid-item :span="3">
      <div class="essay-right">
        <div class="right-top">
          <div>个人资料</div>
          <n-button strong secondary type="info" v-if="isMySelf" @click="updateUserModal = true">
            修改资料
          </n-button>
        </div>
        <n-divider style="background-color: #63e2b7;"/>
        <div class="user-message">
          <div>
            用户名: {{ userData.username }}
          </div>
          <div>
            性别: {{ userData.sex }}
          </div>
          <div style="margin-top: 20px;">
            个性签名: {{ userData.sign }}
          </div>
        </div>
      </div>
    </n-grid-item>
  </n-grid>

  <updateUserMessage :updateUserModal="updateUserModal" @closeModal="updateUserModal = false"></updateUserMessage>
</template>

<script setup lang='ts'>
import { essayListType } from "../../types/index"
import ShowEssay from "../../components/showEssay.vue";
import updateUserMessage from "../../components/updateUserMessage.vue";
import {ref} from "vue"

defineProps<{
  essayData: essayListType[],
  userData: any,
  isMySelf: boolean,
}>()

const updateUserModal = ref<boolean>(false)
</script>

<style lang='scss' scoped>
.essay-left{
  padding: 15px 10px 20px 25px;
  box-sizing: border-box;
  background-color: var(--bs-content-background);
  border-radius: 5px;
}
.essay-right{
  background-color: var(--bs-content-background);
  height: 300px;
  margin-left: 20px;
  border-radius: 5px;
  padding: 20px;
  box-sizing: border-box;
  .right-top{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .user-message{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    div{
      min-width: 140px;
    }
  }
}
</style>